<template>
	<div class="sku_container">
		<el-dialog
			:title="`${specName.type === 'set' ? '编辑' : '添加'}规格项`"
			v-model="specName.visible"
			:append-to-body="true"
			:close-on-click-modal="false"
			width="500px"
		>
			<el-form>
				<el-form-item>
					<el-input
						v-model="specName.value"
						placeholder="请输入规格项名称 多个请使用空格分隔"
						ref="specNameInput"
					/>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="specName.visible = false">取消</el-button>
					<el-button type="primary" @click="addOption">确定</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog
			title="规格图片"
			width="665px"
			v-model="specImageVisible"
			:append-to-body="true"
			:close-on-click-modal="false"
		>
			<sc-upload-multiple ref="specImage" v-model="specImage" title="选择规格图片"></sc-upload-multiple>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="specImageVisible = false">取消</el-button>
					<el-button @click="confirmSpecImage" type="primary">确定</el-button>
				</div>
			</template>
		</el-dialog>
		<draggable
			v-model="specification"
			item-key="id"
			:draggable="'.sku_group'"
			handle=".futuozhuai"
			easing="cubic-bezier(1, 0, 0, 1)"
			:animation="300"
		>
			<template #item="fu">
				<div class="sku_group mb10">
					<div class="spec_title">
						<span class="label">规格名：</span>
						<el-input
							class="input"
							placeholder="请输入规格名"
							v-model.trim="fu.element.value"
						/>
						<el-icon class="futuozhuai drag-sort"><el-icon-rank /></el-icon>
						<el-popconfirm
							title="确定要执行删除操作吗?"
							@confirm="delSepc(fu.index)"
							placement="top"
						>
							<template #reference>
								<div class="remove">×</div>
							</template>
						</el-popconfirm>
					</div>
					<div class="group_container">
						<draggable
							class="option_box"
							v-model="fu.element.leaf"
							:draggable="'.option_item'"
							item-key="id"
							handle=".zituozhuai"
							easing="cubic-bezier(1, 0, 0, 1)"
							:animation="300"
						>
							<template #item="zi">
								<div class="option_item">
									<div class="drag-sort-box">
										<el-icon class="zituozhuai drag-sort "><el-icon-rank /></el-icon>
									</div>
									<el-popover
										placement="top"
										trigger="hover"
										:hide-after="50"
										width="170px"
										:disabled="!zi.element.thumb"
									>
										<el-image
											:src="getCoverUrl(zi.element.thumb)"
											fit="cover"
											v-if="zi.element.thumb"
											style="height: 140px; width: 140px; border-radius: 2px"
										/>
										<template #reference>
											<el-avatar
												class="cs-cp spec-position"
												shape="square"
												@click="
													setSpecImage(
														fu.index,
														zi.index,
														zi.element.thumb
													)
												"
												:src="getCoverUrl(zi.element.thumb)"
												:size="32"
											>
												<el-icon><el-icon-picture /></el-icon>
											</el-avatar>
										</template>
									</el-popover>

									<el-tag
										size="large"
										effect="plain"
										@close="delOption(fu.index, zi.index)"
										color="#ecf5ff"
										@dblclick="
											dialogSpecItemName(
												zi.element.value,
												'set',
												zi.element,
												zi.index,
												fu.index
											)
										"
										closable
									>
										<div class="tag-text" title="双击编辑">
											{{ zi.element.value }}
										</div>
									</el-tag>
								</div>
							</template>
						</draggable>
						<el-button
							@click="dialogSpecItemName(null, 'add', null, null, fu.index)"
							title="添加规格项"
							icon="el-icon-plus"
							class="smini-plus"
							size="mini"
						/>
					</div>
				</div>
			</template>
		</draggable>
		<div class="spec_title">
			<el-button type="info" :disabled="disabled" @click="addSpec">添加规格项目</el-button>
		</div>
		<sku-table
			ref="skuTable"
			:skusData="specificationFilter"
			:optionsData="option_data"
			:baseUrl="baseUrl"
		/>
	</div>
</template>

<script>
import draggable from "vuedraggable";
import SkuTable from "./skuTable.vue";

export default {
	name: "goods-spec-form",
	components: {
		draggable,
		SkuTable
	},
	props: {
		spec_data: { type: Array, default: () => [] },
		option_data: { type: Array, default: () => [] },
		baseUrl: { type: String, default: "" }
	},
	data() {
		return {
			specName: {
				value: "",
				type: "",
				visible: false,
				parent: null,
				key: null,
				index: 0
			},
			specImage: "",
			specImageKey: {},
			specImageVisible: false,
			disabled: false,
			specification: []
			/*
      specification: [
        { id: '1', value: 'test', leaf: [{ id: '1-1', value: 'z11', thumb: '' }, { id: '1-2', value: 'z12', thumb: '' }] },
        { id: '2', value: 'test2', leaf: [{ id: '2-1', value: 'z21', thumb: '' }, { id: '2-2', value: 'z22', thumb: '' }] }
      ]
      */
		};
	},
	computed: {
		specificationFilter() {
			return this.specification.filter((item) => item.value && item.leaf);
		}
	},
	watch: {
		spec_data: {
			handler() {
				this.initData();
			},
			immediate: true
		}
	},
	mounted() {
		// this.initData();
	},
	methods: {
		initData() {
			this.specification = this.spec_data.concat();
		},
		test() {
			console.log(this.specificationFilter);
		},
		test2() {
			let specs = this.specificationFilter;
			let tableData = this.$refs["skuTable"].getInputData();

			console.log(specs,tableData);
		},
		getSpecData() {
			return {
				specs: this.specificationFilter.map((item) => {
					return {
						id: item.id,
						items: item.leaf,
						value: item.value
					};
				}),
				tables: this.$refs["skuTable"].getInputData()
			};
		},
		getCoverUrl(_photo) {
			if (!_photo) {
				return "";
			} else {
				if (/(http|https):\/\/([\w.]+\/?)\S*/.test(_photo)) {
					return _photo;
				}
				return this.baseUrl + _photo;
			}
		},
		addSpec() {
			this.specification.push({
				id: this.$TOOL.createUniqueString() + "_id",
				value: "",
				leaf: []
			});
		},
		delSepc(_index) {
			this.specification.splice(_index, 1);
		},
		addOption() {
			if (!this.specName.value) {
				this.specName.visible = false;
				return;
			}

			let str = this.specName.value;
			str = str.trim();
			if (!str) return;

			if (this.specName.type === "add") {
				const oldArr = this.specification[this.specName.index].leaf;
				const arr = str
					.split(/\s+/) // 使用空格分割成数组
					.filter((value) => !oldArr.some((option) => option.value === value)) // 过滤掉 oldArr 已存在的 value
					.map((value, index) => ({
						id: this.$TOOL.createUniqueString() + "_" + index + "_id",
						value,
						thumb: ""
					})); // 把 value 转成对象，id 设置为 null
				this.specification[this.specName.index].leaf = this.$TOOL.uniqueArr([...oldArr, ...arr]);
			}

			if (this.specName.type === "set") {
				const { parent } = this.specName;
				parent["value"] = str;
			}

			this.specName.visible = false;
		},
		delOption(specIndex, optionIndex) {
			this.specification[specIndex].leaf.splice(optionIndex, 1);
		},
		dialogSpecItemName(value, type, parent, key, index) {
			this.specName = { value, type, parent, key, index: index, visible: true };
			this.$nextTick(() => {
				this.$refs.specNameInput.select();
			});
		},
		setSpecImage(parentIndex, optionIndex, thumb) {
			this.specImage = thumb;
			this.specImageKey = { parentIndex, optionIndex };
			this.specImageVisible = true;
		},
		// 完成规格图片编辑
		confirmSpecImage() {
			const { parentIndex, optionIndex } = this.specImageKey;
			// let data = this.specification[parentIndex].leaf[optionIndex];
			this.specification[parentIndex].leaf[optionIndex].thumb = this.specImage;
			this.specImageVisible = false;
		}
	}
};
</script>

<style lang="scss">
.sku_container {
	margin-bottom: 30px;
	font-size: 12px;
	color: #666;
	padding: 10px;
	border: 1px solid #e5e5e5;
}

.remove {
	position: absolute;
	z-index: 2;
	width: 18px;
	height: 18px;
	font-size: 14px;
	line-height: 16px;
	color: #409eff;
	text-align: center;
	cursor: pointer;
	//background: rgba(0,0,0,.3);
	border-radius: 50%;
	&:hover {
		color: #fff;
		background-color: #409eff;
	}
}
.futuozhuai {
	color: #409eff;
	border-radius: 50%;
	&:hover {
		color: #fff;
		background-color: #409eff;
	}
}
.zituozhuai {
	color: #409eff;
	border-radius: 50%;
	&:hover {
		color: #fff;
		background-color: #409eff;
	}
}
.sku_group {
	margin-bottom: 10px;
	&:hover .active {
		display: block;
	}
}
.drag-sort {
	position: absolute;
	z-index: 2;
	width: 18px;
	height: 18px;
	text-align: center;
	cursor: move;
	&.el-icon-rank {
		line-height: 18px;
		font-size: 18px;
	}
}
.spec_title {
	position: relative;
	padding: 7px 10px;
	background-color: #ebf3fb;
	line-height: 16px;
	font-weight: 400;

	.input {
		width: 200px;
	}
	.remove {
		top: 12px;
		right: 10px;
	}
	.drag-sort {
		top: 12px;
		right: 40px;
	}
}
.active1 {
	display: none;
}
.group_container {
	padding: 10px 10px 0;
	display: flex;
	min-height: 42px;
	.input {
		width: 250px;
	}
	.option_box {
		display: flex;
	}
	.el-button--mini {
		padding: 10px 15px;
	}
	.option_item {
		display: flex;
		text-align: center;
		margin: 0 5px;
		padding-left: 5px;
		background-color: #ecf5ff;
		height: 35px;
		border-radius: 4px;
		border: solid 1px #b3d8ff;
		.el-tag--plain {
			border: none;
		}
		.el-avatar--square {
			border-radius: 0;
			background: none;
			color: #409eff;
		}
		.tag-text {
			display: inline-block;
			padding-right: 15px;
			cursor:pointer;
		}
		.spec-position {
			margin-right: 5px;
			cursor: pointer;
		}
		.drag-sort-box {
			position: relative;
			width: 20px;
			.drag-sort {
				top: 6px;
				left: 0;
			}
		}
	}
}
.group_container .smini-plus {
	height: 34px;
	width: 34px;
	padding: 8px 10px;
}
</style>
